<template>
  <div class="com-top">
    <div class="top-main" ref="topMain"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getTop10 } from '@/api/statistics'
export default {
  name: 'ComTop10',
  data () {
    return {
      top10Data: {
        nameList: [],
        numberList: []
      }
    }
  },
  created () {
    this.getTop10()
  },
  methods: {
    async getTop10 () {
      const res = await getTop10({
        begin: this.begin,
        end: this.end
      })
      if (res.code === 1) {
        this.top10Data.nameList = res.data.nameList.split(',').reverse()
        this.top10Data.numberList = res.data.numberList.split(',').reverse()
        this.$nextTick(() => this.top10())
      }
    },
    top10 () {
      const myChart = echarts.init(this.$refs.topMain)
      const options = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#fff',
          borderRadius: 2,
          textStyle: {
            color: '#333',
            fontSize: 12,
            fontWeight: 300
          }
        },
        grid: {
          top: '-10px',
          left: '0',
          right: '0',
          bottom: '0',
          containLabel: true
        },
        xAxis: {
          show: false
        },
        yAxis: {
          axisLine: { show: false },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          type: 'category',
          axisLabel: {
            color: '#666',
            fontSize: 12
          },
          data: this.top10Data.nameList
        },
        series: [{
          data: this.top10Data.numberList,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: '#F3F4F7'
          },
          barWidth: 20,
          barGap: '80%',
          barCategoryGap: '80%',
          itemStyle: {
            borderRadius: [0, 10, 10, 0] // 替代 barBorderRadius
          },
          color: new echarts.graphic.LinearGradient(
            1, 0, 0, 0,
            [
              { offset: 0, color: '#FFBD00' },
              { offset: 1, color: '#FFD000' }
            ]
          ),
          label: {
            show: true,
            formatter: '{@score}',
            color: '#333',
            position: ['8', '5']
          },
          emphasis: {
            itemStyle: {
              borderRadius: 30
            }
          }
        }]
      }
      myChart.setOption(options)
    }
  },
  props: {
    begin: {
      type: String,
      default: ''
    },
    end: {
      type: String,
      default: ''
    }
  },
  watch: {
    begin () {
      this.getTop10()
    }
  }
}
</script>

<style lang="less" scoped>
.com-top,
.top-main {
    height: 100%;
}

</style>
